<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UC-QA-004：智能问答原型</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.12.8/dist/reset.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .header {
            background: #fff;
            padding: 16px 24px;
            border-bottom: 1px solid #e8e8e8;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .breadcrumb {
            color: #666;
            font-size: 14px;
        }
        
        .breadcrumb a {
            color: #1890ff;
            text-decoration: none;
        }
        
        .main-content {
            padding: 24px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .content-area {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 24px;
        }
        
        .sidebar {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .sidebar-header {
            background: #fafafa;
            padding: 16px 20px;
            border-bottom: 1px solid #e8e8e8;
        }
        
        .sidebar-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .sidebar-content {
            padding: 16px;
        }
        
        .conversation-list {
            list-style: none;
            margin-bottom: 24px;
        }
        
        .conversation-item {
            padding: 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 8px;
            border: 1px solid #f0f0f0;
        }
        
        .conversation-item:hover {
            background: #f8f9fa;
            border-color: #1890ff;
        }
        
        .conversation-item.active {
            background: #e6f7ff;
            border-color: #1890ff;
        }
        
        .conversation-title {
            font-size: 13px;
            color: #333;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .conversation-time {
            font-size: 11px;
            color: #999;
            margin-bottom: 4px;
        }
        
        .conversation-preview {
            font-size: 11px;
            color: #666;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .knowledge-categories {
            list-style: none;
        }
        
        .category-item {
            padding: 8px 0;
            cursor: pointer;
            font-size: 13px;
            color: #666;
            transition: color 0.3s;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .category-item:hover {
            color: #1890ff;
        }
        
        .category-item:last-child {
            border-bottom: none;
        }
        
        .main-panel {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .panel-header {
            background: #fafafa;
            padding: 16px 20px;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .panel-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .header-actions {
            display: flex;
            gap: 8px;
        }
        
        .btn {
            padding: 6px 12px;
            border: 1px solid;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
            border-color: #40a9ff;
        }
        
        .btn-default {
            background: #fff;
            border-color: #d9d9d9;
            color: #333;
        }
        
        .btn-default:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .chat-display {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            max-height: 60vh;
        }
        
        .message {
            margin-bottom: 20px;
            display: flex;
            gap: 12px;
        }
        
        .message.user {
            flex-direction: row-reverse;
        }
        
        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            flex-shrink: 0;
        }
        
        .message.user .message-avatar {
            background: #1890ff;
        }
        
        .message.ai .message-avatar {
            background: #52c41a;
        }
        
        .message-content {
            flex: 1;
            max-width: 70%;
        }
        
        .message-bubble {
            padding: 12px 16px;
            border-radius: 12px;
            position: relative;
        }
        
        .message.user .message-bubble {
            background: #e6f7ff;
            border: 1px solid #b3d8ff;
        }
        
        .message.ai .message-bubble {
            background: #f6ffed;
            border: 1px solid #b7eb8f;
        }
        
        .message-text {
            font-size: 14px;
            line-height: 1.6;
            color: #333;
            margin-bottom: 8px;
        }
        
        .message-time {
            font-size: 11px;
            color: #999;
        }
        
        .message-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        
        .action-btn {
            padding: 4px 8px;
            border: 1px solid #d9d9d9;
            background: #fff;
            border-radius: 3px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .action-btn:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .thinking-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: #f8f9fa;
            border-radius: 12px;
            color: #666;
            font-size: 13px;
        }
        
        .thinking-dots {
            display: flex;
            gap: 2px;
        }
        
        .thinking-dot {
            width: 4px;
            height: 4px;
            background: #1890ff;
            border-radius: 50%;
            animation: thinking 1.4s infinite;
        }
        
        .thinking-dot:nth-child(2) { animation-delay: 0.2s; }
        .thinking-dot:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes thinking {
            0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
            30% { transform: scale(1.2); opacity: 1; }
        }
        
        .question-input {
            padding: 20px;
            border-top: 1px solid #e8e8e8;
            background: #fafafa;
        }
        
        .input-container {
            display: flex;
            gap: 12px;
            align-items: flex-end;
        }
        
        .input-field {
            flex: 1;
            min-height: 40px;
            max-height: 120px;
            padding: 10px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 20px;
            font-size: 14px;
            line-height: 1.5;
            resize: none;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .input-field:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
        }
        
        .input-actions {
            display: flex;
            gap: 8px;
        }
        
        .btn-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        
        .quick-questions {
            margin-top: 12px;
        }
        
        .quick-question {
            display: inline-block;
            padding: 6px 12px;
            margin: 4px 8px 4px 0;
            background: #f0f8ff;
            border: 1px solid #b3d8ff;
            border-radius: 16px;
            font-size: 12px;
            color: #1890ff;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .quick-question:hover {
            background: #e6f7ff;
            border-color: #1890ff;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .content-area {
                grid-template-columns: 1fr;
            }
            
            .sidebar {
                order: -1;
            }
            
            .message-content {
                max-width: 85%;
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <div class="header">
        <div class="breadcrumb">
            <a href="#">首页</a> > <a href="#">智能服务</a> > 智能问答
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <div class="content-area">
            <!-- 侧边栏 -->
            <div class="sidebar">
                <div class="sidebar-header">
                    <div class="sidebar-title">对话历史</div>
                </div>
                <div class="sidebar-content">
                    <ul class="conversation-list">
                        <li class="conversation-item active" onclick="selectConversation(this)">
                            <div class="conversation-title">安全操作指导</div>
                            <div class="conversation-time">2024-05-15 14:30</div>
                            <div class="conversation-preview">在完成操作后，应该进行哪些检查步骤？</div>
                        </li>
                        <li class="conversation-item" onclick="selectConversation(this)">
                            <div class="conversation-title">设备维护问题</div>
                            <div class="conversation-time">2024-05-15 14:25</div>
                            <div class="conversation-preview">如何正确维护生产设备？</div>
                        </li>
                        <li class="conversation-item" onclick="selectConversation(this)">
                            <div class="conversation-title">培训课程咨询</div>
                            <div class="conversation-time">2024-05-15 14:20</div>
                            <div class="conversation-preview">有哪些培训课程可以参加？</div>
                        </li>
                        <li class="conversation-item" onclick="selectConversation(this)">
                            <div class="conversation-title">系统使用帮助</div>
                            <div class="conversation-time">2024-05-15 14:15</div>
                            <div class="conversation-preview">如何使用这个培训系统？</div>
                        </li>
                    </ul>
                    
                    <div style="margin-bottom: 20px;">
                        <div class="sidebar-title" style="margin-bottom: 12px;">知识库</div>
                        <ul class="knowledge-categories">
                            <li class="category-item" onclick="selectCategory('safety')">⚠️ 安全操作</li>
                            <li class="category-item" onclick="selectCategory('equipment')">🔧 设备维护</li>
                            <li class="category-item" onclick="selectCategory('training')">🎓 培训课程</li>
                            <li class="category-item" onclick="selectCategory('system')">💻 系统使用</li>
                            <li class="category-item" onclick="selectCategory('policy')">📋 政策制度</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 主面板 -->
            <div class="main-panel">
                <div class="panel-header">
                    <div class="panel-title">智能问答助手</div>
                    <div class="header-actions">
                        <button class="btn btn-default" onclick="clearChat()">🗑️ 清空对话</button>
                        <button class="btn btn-default" onclick="exportChat()">📤 导出对话</button>
                        <button class="btn btn-default" onclick="openSettings()">⚙️ 设置</button>
                    </div>
                </div>
                
                <!-- 对话显示区域 -->
                <div class="chat-display" id="chatDisplay">
                    <div class="message ai">
                        <div class="message-avatar">AI</div>
                        <div class="message-content">
                            <div class="message-bubble">
                                <div class="message-text">您好！我是智能问答助手，可以为您解答关于安全操作、设备维护、培训课程等方面的问题。请问有什么可以帮助您的吗？</div>
                                <div class="message-time">2024-05-15 14:30</div>
                                <div class="message-actions">
                                    <button class="action-btn" onclick="likeMessage(this)">👍 有用</button>
                                    <button class="action-btn" onclick="dislikeMessage(this)">👎 无用</button>
                                    <button class="action-btn" onclick="copyMessage(this)">📋 复制</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="message user">
                        <div class="message-avatar">我</div>
                        <div class="message-content">
                            <div class="message-bubble">
                                <div class="message-text">在完成操作后，应该进行哪些检查步骤？</div>
                                <div class="message-time">2024-05-15 14:31</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="message ai">
                        <div class="message-avatar">AI</div>
                        <div class="message-content">
                            <div class="message-bubble">
                                <div class="message-text">在完成操作后，应该进行以下检查步骤：<br><br>1. <strong>设备状态检查</strong>：确认设备已完全停止运行，检查各部件是否正常<br>2. <strong>工具归位</strong>：将所有使用过的工具放回指定位置<br>3. <strong>环境清理</strong>：清理工作区域，确保无杂物和安全隐患<br>4. <strong>记录日志</strong>：详细记录操作过程和检查结果<br>5. <strong>安全确认</strong>：确认所有安全措施已到位，可以安全离开<br><br>这些步骤有助于确保操作的安全性和规范性。</div>
                                <div class="message-time">2024-05-15 14:31</div>
                                <div class="message-actions">
                                    <button class="action-btn" onclick="likeMessage(this)">👍 有用</button>
                                    <button class="action-btn" onclick="dislikeMessage(this)">👎 无用</button>
                                    <button class="action-btn" onclick="copyMessage(this)">📋 复制</button>
                                    <button class="action-btn" onclick="viewSource(this)">🔗 查看来源</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 问题输入区域 -->
                <div class="question-input">
                    <div class="input-container">
                        <textarea class="input-field" id="questionInput" placeholder="请输入您的问题..." rows="1"></textarea>
                        <div class="input-actions">
                            <button class="btn btn-default btn-circle" onclick="voiceInput()" title="语音输入">🎤</button>
                            <button class="btn btn-default btn-circle" onclick="attachFile()" title="附件">📎</button>
                            <button class="btn btn-primary btn-circle" onclick="sendQuestion()" title="发送">➤</button>
                        </div>
                    </div>
                    
                    <div class="quick-questions">
                        <div class="quick-question" onclick="askQuickQuestion('安全操作规范有哪些？')">安全操作规范有哪些？</div>
                        <div class="quick-question" onclick="askQuickQuestion('如何正确使用防护用品？')">如何正确使用防护用品？</div>
                        <div class="quick-question" onclick="askQuickQuestion('设备故障如何处理？')">设备故障如何处理？</div>
                        <div class="quick-question" onclick="askQuickQuestion('培训课程安排')">培训课程安排</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 设置弹窗 -->
    <div class="modal" id="settingsModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">问答设置</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div style="margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">回答语言</label>
                    <select style="width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px;">
                        <option value="zh-CN" selected>中文</option>
                        <option value="en-US">英文</option>
                        <option value="vi-VN">越南语</option>
                    </select>
                </div>
                <div style="margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">回答风格</label>
                    <select style="width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px;">
                        <option value="professional" selected>专业</option>
                        <option value="friendly">友好</option>
                        <option value="concise">简洁</option>
                    </select>
                </div>
                <div style="margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">知识库范围</label>
                    <div>
                        <input type="checkbox" checked> 安全操作知识<br>
                        <input type="checkbox" checked> 设备维护知识<br>
                        <input type="checkbox" checked> 培训课程知识<br>
                        <input type="checkbox"> 政策制度知识
                    </div>
                </div>
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 500;">其他设置</label>
                    <div>
                        <input type="checkbox" checked> 自动保存对话历史<br>
                        <input type="checkbox" checked> 显示回答来源<br>
                        <input type="checkbox"> 启用语音回答
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="saveSettings()">保存</button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let isThinking = false;

        // 发送问题
        function sendQuestion() {
            const input = document.getElementById('questionInput');
            const question = input.value.trim();
            
            if (!question) return;
            
            // 添加用户消息
            addUserMessage(question);
            input.value = '';
            adjustTextareaHeight(input);
            
            // 显示思考状态
            showThinkingIndicator();
            
            // 模拟AI回答
            setTimeout(() => {
                hideThinkingIndicator();
                addAIMessage(generateAIResponse(question));
            }, 2000);
        }

        // 添加用户消息
        function addUserMessage(text) {
            const chatDisplay = document.getElementById('chatDisplay');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message user';
            messageDiv.innerHTML = `
                <div class="message-avatar">我</div>
                <div class="message-content">
                    <div class="message-bubble">
                        <div class="message-text">${text}</div>
                        <div class="message-time">${new Date().toLocaleTimeString()}</div>
                    </div>
                </div>
            `;
            chatDisplay.appendChild(messageDiv);
            chatDisplay.scrollTop = chatDisplay.scrollHeight;
        }

        // 添加AI消息
        function addAIMessage(text) {
            const chatDisplay = document.getElementById('chatDisplay');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message ai';
            messageDiv.innerHTML = `
                <div class="message-avatar">AI</div>
                <div class="message-content">
                    <div class="message-bubble">
                        <div class="message-text">${text}</div>
                        <div class="message-time">${new Date().toLocaleTimeString()}</div>
                        <div class="message-actions">
                            <button class="action-btn" onclick="likeMessage(this)">👍 有用</button>
                            <button class="action-btn" onclick="dislikeMessage(this)">👎 无用</button>
                            <button class="action-btn" onclick="copyMessage(this)">📋 复制</button>
                            <button class="action-btn" onclick="viewSource(this)">🔗 查看来源</button>
                        </div>
                    </div>
                </div>
            `;
            chatDisplay.appendChild(messageDiv);
            chatDisplay.scrollTop = chatDisplay.scrollHeight;
        }

        // 显示思考状态
        function showThinkingIndicator() {
            isThinking = true;
            const chatDisplay = document.getElementById('chatDisplay');
            const thinkingDiv = document.createElement('div');
            thinkingDiv.className = 'message ai';
            thinkingDiv.id = 'thinkingIndicator';
            thinkingDiv.innerHTML = `
                <div class="message-avatar">AI</div>
                <div class="message-content">
                    <div class="thinking-indicator">
                        <span>AI正在思考</span>
                        <div class="thinking-dots">
                            <div class="thinking-dot"></div>
                            <div class="thinking-dot"></div>
                            <div class="thinking-dot"></div>
                        </div>
                    </div>
                </div>
            `;
            chatDisplay.appendChild(thinkingDiv);
            chatDisplay.scrollTop = chatDisplay.scrollHeight;
        }

        // 隐藏思考状态
        function hideThinkingIndicator() {
            isThinking = false;
            const thinkingDiv = document.getElementById('thinkingIndicator');
            if (thinkingDiv) {
                thinkingDiv.remove();
            }
        }

        // 生成AI回答
        function generateAIResponse(question) {
            const responses = {
                '安全操作': '安全操作是生产过程中的重要环节，需要严格遵守相关规范和程序。',
                '设备维护': '设备维护包括日常检查、定期保养、故障排除等方面，确保设备正常运行。',
                '培训课程': '我们提供多种培训课程，包括安全培训、技能培训、管理培训等。',
                '系统使用': '系统使用需要按照操作手册进行，遇到问题可以联系技术支持。'
            };
            
            for (let key in responses) {
                if (question.includes(key)) {
                    return responses[key];
                }
            }
            
            return '感谢您的提问。这是一个很好的问题，我会为您提供详细的解答。如果您需要更多信息，请随时告诉我。';
        }

        // 快捷问题
        function askQuickQuestion(question) {
            document.getElementById('questionInput').value = question;
            sendQuestion();
        }

        // 消息操作
        function likeMessage(element) {
            element.textContent = '👍 已赞';
            element.style.color = '#52c41a';
            console.log('点赞消息');
        }

        function dislikeMessage(element) {
            element.textContent = '👎 已踩';
            element.style.color = '#ff4d4f';
            console.log('踩消息');
        }

        function copyMessage(element) {
            const messageText = element.closest('.message-bubble').querySelector('.message-text').textContent;
            navigator.clipboard.writeText(messageText);
            console.log('复制消息');
        }

        function viewSource(element) {
            console.log('查看来源');
        }

        // 对话管理
        function selectConversation(element) {
            document.querySelectorAll('.conversation-item').forEach(item => {
                item.classList.remove('active');
            });
            element.classList.add('active');
            console.log('选择对话');
        }

        function clearChat() {
            if (confirm('确定要清空当前对话吗？')) {
                const chatDisplay = document.getElementById('chatDisplay');
                chatDisplay.innerHTML = `
                    <div class="message ai">
                        <div class="message-avatar">AI</div>
                        <div class="message-content">
                            <div class="message-bubble">
                                <div class="message-text">您好！我是智能问答助手，可以为您解答关于安全操作、设备维护、培训课程等方面的问题。请问有什么可以帮助您的吗？</div>
                                <div class="message-time">${new Date().toLocaleTimeString()}</div>
                                <div class="message-actions">
                                    <button class="action-btn" onclick="likeMessage(this)">👍 有用</button>
                                    <button class="action-btn" onclick="dislikeMessage(this)">👎 无用</button>
                                    <button class="action-btn" onclick="copyMessage(this)">📋 复制</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                console.log('清空对话');
            }
        }

        function exportChat() {
            console.log('导出对话');
        }

        function openSettings() {
            document.getElementById('settingsModal').style.display = 'flex';
        }

        function saveSettings() {
            closeModal();
            console.log('保存设置');
        }

        // 知识库
        function selectCategory(category) {
            console.log('选择知识分类:', category);
        }

        // 输入功能
        function voiceInput() {
            console.log('语音输入');
        }

        function attachFile() {
            console.log('附件上传');
        }

        // 弹窗控制
        function closeModal() {
            document.getElementById('settingsModal').style.display = 'none';
        }

        // 点击弹窗外部关闭
        document.getElementById('settingsModal').addEventListener('click', (e) => {
            if (e.target.id === 'settingsModal') {
                closeModal();
            }
        });

        // 文本域高度自适应
        function adjustTextareaHeight(textarea) {
            textarea.style.height = 'auto';
            textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
        }

        // 回车发送
        document.getElementById('questionInput').addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendQuestion();
            }
        });

        // 输入监听
        document.getElementById('questionInput').addEventListener('input', (e) => {
            adjustTextareaHeight(e.target);
        });

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            console.log('智能问答页面初始化');
        });
    </script>
</body>
</html>

